<template>
  <view class="canvas-wrap" style="position: relative;" :style="{width: '614rpx',height: '1090rpx'}">
    <!-- <tki-qrcode class="tkiQrcode" ref="qrcode" :val="val" unit="upx" :size="330" :onval="true" :loadMake="true" :showLoading="true" @result="qrR"/> -->
    <canvas :style="{width: '614rpx',height: '1090rpx'}" :canvas-id="canvasId" style="position: absolute;top: 0;"></canvas>
  </view>
</template>

<script>
export default {
  props: {
    val: String,
    canvasId: String
  },
  data () {
    return {
      path: '',
      posterImg: ''
    }
  },
  mounted () {
    if (this.val) {
      this.path = this.val;
      this.drawCanvas();
    }
  },
  methods: {
    // qrR (path) {
    //   if (path == '') {
    //     uni.showToast({
    //       title: '生成失败，请重试',
    //       icon: 'none'
    //     });
    //     return;
    //   }
    //   this.path = path;
    //   this.drawCanvas();
    // },
    drawCanvas () {
      let that = this;
      // let 
      const ctx = uni.createCanvasContext(this.canvasId)
      ctx.drawImage('/static/image/invite/qrcode_bg.jpg', 0, 0, uni.upx2px(614), uni.upx2px(1090))
      // console.log((this.$store.state.imgBaseUrl + '/invite/qrcode_bg.jpg'));
      ctx.drawImage(this.path, uni.upx2px(174), uni.upx2px(582), uni.upx2px(274), uni.upx2px(274))
      ctx.draw(true, function () {
        uni.canvasToTempFilePath({
          canvasId: that.canvasId,
          success (res) {
            that.posterImg = res.tempFilePath;
            that.$emit('updateQRCodeUrl', {
              url: res.tempFilePath
            });
          },
          fail (res) {
            uni.showToast({
              title: '生成二维码失败',
              icon: 'none'
            })
          },
        })
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .tkiQrcode {
    position: fixed;
    top: -99999upx;
    left: -99999upx;
    z-index: -99999;
  }
</style>
